<template>
  <div class="container">
    <normal-title title='购物车'></normal-title>
    <div
      v-if="userCart.length===0"
      class="no-data"
    >
      <img
        src="../../images/cart_empty.png"
        mode="aspectFit"
      >
      <div class="no-order-text">您的购物车空空如也~</div>
      <a
        open-type="switchTab"
        href="/pages/index/main"
        hover-class="none"
        class="btn pay"
      >去看看</a>
    </div>
    <div
      class="card"
      v-for="(item, index) in userCart"
      :key="index"
      v-if="userCart.length>0"
    >

      <img
        @click="delProduct(item.cart_id,index)"
        class="delete-icon"
        src="../../images/close.png"
        mode="widthFix"
      >

      <img
        @click="choiceProduct(item,index)"
        :src="item.actived?'../../images/choice-sel.png':'../../images/choice-nor.png'"
        class="choice"
        mode="aspectFit"
      >
      <a
        :href="'/pages/detail/main?id='+item.product_id"
        class="navgator"
        hover-class="none"
      >
        <img
          class="thumb"
          :src="item.image"
          mode="aspectFit"
        >
      </a>
      <div class="info">
              <a
        :href="'/pages/detail/main?id='+item.product_id"
        class="text"
        hover-class="none"
      >{{item.product_name}}</a>
        <div class="spec">规格: {{item.item_no}}</div>
        <div class="row">
          <p class="price"><span class="price-icon">￥</span>{{item.real_price}}</p>
          <div class="change-count">
            <div
              hover-class="btn-hover"
              class="pop"
              @click="changeCount(-1,item)"
            >-</div>
            <div class="count">{{item.num}}</div>
            <div
              hover-class="btn-hover"
              class="add"
              @click="changeCount(1,item)"
            >+</div>
          </div>
        </div>
      </div>

    </div>
    <div class="module"></div>
    <div class="row-fixed">
      <img
        @click="choiceAll"
        :src="choiceStatus?'../../images/choice-sel.png':'../../images/choice-nor.png'"
        class="choice"
        mode="aspectFit"
      >
      <div class="all">全选</div>
      <div class="total">
        <p class="real-price">合计: <span>￥{{totalPrice}}</span></p>
        <!-- <p class="old-price">原价 ￥{{originalTotalPrice}} -优惠 ￥{{originalTotalPrice-totalPrice}}</p> -->
      </div>
      <div
        class="btn"
        @click="toAccount"
      >去结算({{activedCount}})</div>
    </div>
  </div>
</template>

<script>
import NormalTitle from '@/components/NormalTitle'
import { request,judgeUser } from '@/utils'
export default {
  components: {
    NormalTitle
  },
  data () {
    return {
      userCart: [],
      status: {}
    }
  },
  computed: {
    activedCount () {
      return this.userCart.reduce((prev, item) => {
        if (item.actived) {
          return prev + 1
        } else {
          return prev
        }
      }, 0)
    },
    choiceStatus () {
      if (this.userCart.every(item => item.actived)) {
        return true
      } else {
        return false
      }
    },
    totalPrice () {
      var price = this.userCart.reduce((prev, item) => {
        if (item.actived) {
          return prev + parseFloat(item.real_price) * item.num
        } else {
          return prev
        }
      }, 0)
      return price.toFixed(2)
    }
  },
  methods: {
    choiceProduct (item, index) {
      this.$set(item, 'actived', !item.actived)
    },
    choiceAll () {
      if (this.choiceStatus) {
        this.userCart.map(item => this.$set(item, 'actived', false))
      } else {
        this.userCart.map(item => this.$set(item, 'actived', true))
      }
    },
    async getCart () {
      var res = await request('/v1/cart', 'get')
      this.userCart = res.data.items
    },
    async delProduct (id, index) {
      await request('/v1/cart/' + id, 'DELETE')
      this.userCart.splice(index, 1)
    },
    async changeCount (type, item) {
      var id = item.cart_id
      var count = item.num
      var number = count - 0 + type
      if (number > 0) {
        await request('/v1/cart/' + id + '?num=' + number, 'PUT')
        this.$set(item, 'num', count - 0 + type)
      }
    },
    async toAccount () {
      var res = await judgeUser();
      if (res.data.success) {
        var cartIds = this.userCart
          .map(e => {
            if (e.actived) {
              return e.cart_id
            }
          })
          .filter(d => d)
        if (cartIds.length > 0) {
          wx.navigateTo({
            url: '/pages/account/main?cart_ids=' + cartIds.join()
          })
        } else {
          wx.showToast({
            title: '请先选择商品',
            icon: 'none'
          })
        }
      } else {
        wx.showModal({
          title: '您当前尚未登录',
          content: '是否前去登录？',
          success (res) {
            if (res.confirm) {
              wx.navigateTo({
                url: '/pages/login/main'
              })
            } else if (res.cancel) {

            }
          }
        })
      }
    }
  },
  created () {
    this.globalData.cartRefresh = true
  },
  onShow () {
    if (this.globalData.cartRefresh === true) {
      this.getCart()
      this.globalData.cartRefresh = false
    }
  }
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}
</style>

<style scoped lang="scss">
.btn-hover {
  background: #e7e7e7;
}
.container {
  font-size: 26rpx;
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 600rpx;
    margin-top: 150rpx;
    img {
      height: 450rpx;
    }
    .no-order-text {
      color: #cacaca;
      margin-top: -40rpx;
      font-size: 16px;
    }
    .btn {
      font-size: 26rpx;
      height: 50rpx;
      border-radius: 30rpx;
      text-align: center;
      line-height: 46rpx;
      margin-left: 20rpx;
      width: 150rpx;
    }
    .cancel {
      border: 1rpx solid #6d6d6d;
      color: #6d6d6d;
    }
    .pay {
      border: 1rpx solid #cdb27e;
      color: #cdb27e;
    }
  }
  .card {
    position: relative;
    margin: 30rpx 25rpx;
    display: flex;
    align-items: center;
    height: 250rpx;
    border-radius: 30rpx;
    background: #fff;
    .delete-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 50rpx;
      border-radius: 0 30rpx 0 0;
    }
    .choice {
      width: 35rpx;
      height: 35rpx;
      padding: 40rpx 20rpx;
    }
    .navgator {
      margin-right: 25rpx;
      .thumb {
        width: 200rpx;
        height: 200rpx;
        border-radius: 15rpx;
      }
    }
    .info {
      width: 365rpx;
      height: 200rpx;
      // border: 1rpx solid #000;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .spec {
        font-size: 20rpx;
        color: #747474;
        margin-bottom: 5rpx;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 115rpx;
      }
      .row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .price {
          color: #b93a39;
          font-size: 46rpx;
          font-weight: 400;
          height: 50rpx;
          .price-icon {
            font-size: 28rpx;
            display: inline-block;
          }
        }
        .change-count {
          display: flex;
          border: 1rpx solid #e7e7e7;
          border-radius: 8rpx;
          height: 45rpx;
          text-align: center;
          line-height: 45rpx;
          .pop {
            width: 45rpx;
          }
          .count {
            border-right: 1rpx solid #e7e7e7;
            border-left: 1rpx solid #e7e7e7;
            width: 65rpx;
          }
          .add {
            width: 45rpx;
          }
        }
      }
    }
  }
  .module {
    height: 100rpx;
    background: transparent;
  }
  .row-fixed {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    width: 750rpx;
    .choice {
      width: 35rpx;
      height: 35rpx;
      padding: 40rpx 20rpx 40rpx 45rpx;
    }
    .all {
      margin-right: 40rpx;
      color: #6d6d6d;
      font-size: 32rpx;
    }
    .total {
      width: 365rpx;
      .real-price {
        font-size: 36rpx;
        span {
          color: #b93a39;
        }
      }
      .old-price {
        font-size: 18rpx;
        color: #6d6d6d;
      }
    }
    .btn {
      width: 160rpx;
      height: 60rpx;
      background: #cdb27e;
      border-radius: 30rpx;
      color: #fff;
      text-align: center;
      line-height: 58rpx;
      font-size: 28rpx;
    }
  }
}
</style>
